// 这个配置文件 其实就是一个js文件 通过node中的模块操作 向外暴露了一个配置对象
const path = require('path')
// 启动热更新第二步
var webpack = require('webpack')
// 导入htmlWebpackPlugin 在内存中生成html页面
// 只要是插件 都一定要放在plugins节点区
// 插件的两个作用 1.自动在内存中根据指定的页面生成一个内存的页面 2.自动把打包好的bundle.js文件自动追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin')




module.exports = {
    // 指定入口 出口
    entry: path.join(__dirname, './src/main.js'), //入口表示要使用 webpack打包哪个文件
    output: {//输出文件的相关配置
        path: path.join(__dirname, './dist'), //指定打包好的文件输出到哪里
        filename: 'bundle.js' //指定打包的文件名
    },
    devServer: {
        open: true,//自动打开浏览器
        hot: true,//启动热更新第一步
        port: 3000,//端口
        contentBase: 'src'//默认显示页面
    },
    plugins: [
        //配置插件的节点
        new webpack.HotModuleReplacementPlugin(),// new一个热更新的模块对象 这是启用热更新的第三步
        new htmlWebpackPlugin({
            // 创建一个 在内存中 生成html页面的插件
            template: path.join(__dirname, './src/index.html'),//指定模板页面 将来会根据指定的页面路径 去生成内存中的页面
            filename: 'index.html' //指定生成页面的名称
        })
    ],
    module: {
        // 这个节点 用于 所有 第三方模块的加载器 
        rules: [
            // 所有第三方模块的匹配规则 
            { test: /\.css$/, use:['style-loader', 'css-loader'] },//配置处理 css文件的第三方loader规则 调用规则 从右到左 先调用后面的 然后把处理的结果 交给前面的 然后进行进一步处理 处理到前面没有多的loader 就直接交给webpack打包
            // 注意 webpack 处理第三方文件类型的过程： 1.发现这个要处理的文件 不是js文件 就回去配置文件里面 看看有没有对应的第三方loader规则 2.如果能找到对应的规则 就会调用对应的 loader来处理这种文件类型 3.调用loader的时候 是从后往前调用的 4.当最后一个loader调用完毕 会吧处理的结果 直接交给webpack进行打包合并
            { test: /\.less$/, use:['style-loader', 'css-loader','less-loader']}
        ]
    }
}



// 当我们在cmd里面 输入webpack 之后 webpack做了一下几步
// 1.首先 webpack 发现 我们没有通过命令的形式 给他指定的入口和出口
// 2.webpack就回去项目的根目录中 查找一个叫做 webpack.config.js 配置文件
// 3. 当找到配置文件后 webpack 会解析执行这个 配置文件 当解析执行完配置文件后 就得到了配置文件中 导出的配置对象
// 4. 当webpack 拿到了配置对象后 就拿到了入口和出口 然后进行打包构建
